            </div>
            <script type="text/javascript">
                    listBtn.onclick = function(){
                        var a = document.getElementById("panel");
                        a.className = "list";
                    }

                    cardBtn.onclick = function(){
                        var a = document.getElementById("panel");
                        a.className = "card";
                    }

                    var mainMenu = document.getElementById("main-menu");
                    var lis = mainMenu.getElementsByTagName("li");
                    for(var i=0,j=lis.length;i<j;i++){
                        var li = lis[i];
                        li.onmouseenter=function(){
                            var enterLi = this;
                            var ul = enterLi.children[1];
                            if(!ul) {
                                return;
                            }
                            ul.style.opacity = 0.5;
                            var tick = setInterval(function(){
                                var opacity = parseFloat(ul.style.opacity);
                                opacity += 0.1;
                                if(opacity>=1){
                                opacity=1;  
                                clearInterval(tick);
                                } 
                                ul.style.opacity =opacity;
                            },100);
                        };
                    }  
                    console.log("0.5"+0.1);
                </script>
            <div>
                <div id="footer">
                    <div id="quick-access"></div>
                    <div id="copyright">
                        <p>Create by Crow.</p>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>